<template>
    <div class="">
        <el-dialog title="平面图标记编辑" :visible.sync="dialogVisible" width="100%" :before-close="closeDialog"
            :close-on-click-modal="false" :append-to-body="true">
            <div class="el_container">

                <div class="el_aside">
                    <el-select v-model="productId" placeholder="产品类型" size="small" style="width: 100%" clearable
                        @visible-change="enterpriseChange" @change="getGetMark(false)">
                        <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>

                    <el-select v-model="isMark" placeholder="标记" size="small" style="width: 100%;margin-top: 15px;"
                        clearable @change="getGetMark(false)">
                        <el-option v-for="item in isMarkList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>

                    <div class="dept-tree">
                        <div v-for="item in markList" :key="item.id"
                            :style="markId == item.id ? 'background-color: #7367F0;color:#fff' : ''"
                            @click="clickTree(item)">
                            <span>{{ item.imei }}</span> <span style="font-size: 13px;color: #F12A2A;"><b
                                    v-if="item.mark == ''">未标记</b></span>
                        </div>
                    </div>

                </div>

                <div class="container">
                    <div class="caritem_div">
                        <div class="div_box" :style="{ transform: `scale(${scale}) `, left: `${x}px`, top: `${y}px` }"
                            @wheel="handleWheel" @mousedown.stop="handleMouseDown" @mousemove="handleMouseMove"
                            @mouseup="handleMouseUp">
                            <el-image class="elImage" :src="image" @click="setPoint" @mousedown.prevent></el-image>
                            <i class="el-icon-location icon" :class="classIcon"
                                :style="'top:' + top + 'px;' + 'left:' + left + 'px;'" v-if="flag">
                                <div class="pop-up">
                                    <div style="margin-bottom: 5px;">设备编码：{{ imei }}</div>
                                    <div>产品类型：{{ productName }}</div>
                                </div>
                            </i>
                        </div>
                    </div>
                </div>

            </div>

            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="closeDialog" class="cancel-button">取 消</el-button>
                <el-button size="small" @click="submit" class="confirm-button">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { reqProductList, reqGetMark, reqUpdateMark } from "@api/api.js";

export default {
    props: ["floorId", "image"],
    components: {},
    data() {
        return {
            dialogVisible: false,
            productList: [],
            productId: "",
            isMark: '',
            isMarkList: [
                // {
                //     id:'1',
                //     name:'全部'
                // },
                {
                    id: '2',
                    name: '已标记'
                }, {
                    id: '3',
                    name: '未标记'
                },
            ],
            markId: '',
            markList: [],
            left: 0,
            top: 0,
            flag: false,
            classIcon: "",
            imei: "",
            productName: "",

            // 放大缩小
            scale: 1, // 初始缩放比例为1
            scaleStep: 0.1, // 每次滚动缩放的步长

            // 鼠标拖动
            x: 0, // div的初始x坐标
            y: 0, // div的初始y坐标
            dragging: false, // 是否正在拖动
            startX: 0, // 鼠标按下时的x坐标
            startY: 0, // 鼠标按下时的y坐标
        };
    },
    computed: {},
    watch: {

    },
    methods: {
        // 鼠标拖动
        handleMouseDown(event) {
            this.dragging = true;
            this.startX = event.clientX - this.x;
            this.startY = event.clientY - this.y;
        },
        handleMouseMove(event) {
            if (!this.dragging) return;
            this.x = event.clientX - this.startX;
            this.y = event.clientY - this.startY;
        },
        handleMouseUp() {
            this.dragging = false;
        },
        // 放大缩小
        handleWheel(event) {
            event.preventDefault(); // 阻止默认事件，防止页面滚动
            const delta = event.deltaY * -1; // 获取滚轮滚动的方向
            this.scale += delta > 0 ? this.scaleStep : -this.scaleStep; // 根据滚动方向调整缩放比例
            // 限制缩放比例的范围，防止过大或过小
            this.scale = Math.min(Math.max(0.1, this.scale), 5);
        },
        // 切换设备
        async clickTree(item) {
            console.log(item);
            // 标记颜色
            if (item.isAlarm == 1) {
                this.classIcon = 'hon'
            } else if (item.online == 0) {
                this.classIcon = 'lixian'
            } else {
                this.classIcon = ''
            }
            // 是否未标记
            if (item.mark == '') {
                this.flag = false;
            } else {
                this.flag = true;
            }
            this.markId = item.id
            this.imei = item.imei
            this.productName = item.productName
            this.left = item.mark.slice(0, item.mark.indexOf(','))
            this.top = item.mark.slice(item.mark.indexOf(',') + 1)
        },
        //获取平面图设备标点
        async getGetMark(flag2 = false) {
            const res = await reqGetMark(1,99,{
                floorId: this.floorId,
                isMark: this.isMark,
                productId: this.productId
            })
            // console.log(res);
            this.markList = res.data.row.markVOList || []
            this.imei = this.markList[0].imei
            this.productName = this.markList[0].productName
            if (flag2) return;
            if (this.markList.length == 0) {
                // 没有设备，隐藏标记点
                this.flag = false;
                return;
            }
            this.markId = this.markList[0].id
            if (this.markList[0].mark == '') {
                this.flag = false;//未标记
                return;
            }
            this.flag = true;
            this.left = this.markList[0].mark.slice(0, this.markList[0].mark.indexOf(','))
            this.top = this.markList[0].mark.slice(this.markList[0].mark.indexOf(',') + 1)
            // 标记颜色
            if (this.markList[0].isAlarm == 1) {
                this.classIcon = 'hon'
            } else if (this.markList[0].online == 0) {
                this.classIcon = 'lixian'
            } else {
                this.classIcon = ''
            }
        },
        //绘制标记
        setPoint(e) {
            // if (!this.flag) return;
            // console.log(e);
            e = e || window.event;
            this.left = e.offsetX - 10 || e.layerX - 10;
            this.top = e.offsetY - 17 || e.layerY - 17;
            this.flag = true;
        },

        // 下拉请求列表
        enterpriseChange(val) {
            if (val) {
                this.getProductList();
            }
        },
        //   获取产品列表
        async getProductList() {
            const res = await reqProductList();
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.productList = res.data.rows;
        },
        // 修改标记
        async submit() {
            if (!this.flag) return;
            const res = await reqUpdateMark({
                id: this.markId,
                mark: this.left + "," + this.top
            })
            // console.log(res);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.$modal.notifySuccess("标记成功!");
            this.getGetMark(true)//未标记的设备刷新
        },
        // 点击关闭弹框
        closeDialog() {
            this.dialogVisible = false;
            this.markList = [];
            this.flag = false;
            this.productId = ''
            this.isMark = ''
            this.$parent.getGetMark(this.floorId)//刷新标记点

            this.scale = 1 // 初始缩放比例为1
            this.scaleStep = 0.1 // 每次滚动缩放的步长
            this.x = 0// div的初始x坐标
            this.y = 0 // div的初始y坐标
            this.dragging = false // 是否正在拖动
            this.startX = 0 // 鼠标按下时的x坐标
            this.startY = 0 // 鼠标按下时的y坐标
        },
    },
    created() { },
    mounted() { },
};
</script>

<style lang="less" scoped>
@import url("../../../common.less");

::v-deep .el-dialog {
    height: 100% !important;
    max-height: 100vh;
}

.el_container {
    display: flex;
    height: 100%;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;

    .el_aside {
        width: 208px;
        margin-right: 20px;
        padding: 13px;
        box-sizing: border-box;
        background-color: @primaryBgcolor7;

        .dept-tree {
            margin-top: 10px;
            height: 82%;
            overflow: auto;
            padding: 0 1px;

            >div {
                display: flex;
                align-items: center;
                // height: 32px;
                padding: 8px 5px;
                cursor: pointer;
                color: @primaryBgcolor8;
                border-radius: 4px;

                >span:first-of-type {
                    width: 70%;
                }

                >span:last-of-type {
                    flex: 1;
                    text-align: center;
                }
            }
        }
    }

    .container {
        flex: 1;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;

        // background-color: @primaryBgcolor7;
        .caritem_div {
            width: 800px;
            height: 450px;
            position: relative;
        }

        .div_box {
            width: 800px;
            height: 450px;
            position: absolute;
            top: 50%;
            left: 50%;
            // transform: translate(-50%, -50%);

            .elImage {
                cursor: move;
                width: 100%;
                height: 100%;
            }

            .icon {
                position: absolute;
                color: #28c76f;
                font-size: 18px;

                .pop-up {
                    position: absolute;
                    // left: 10px;
                    bottom: 28px;
                    left: 50%;
                    transform: translate(-50%, 0);
                    background: rgba(115, 103, 240, 0.9);
                    width: 250px;
                    padding: 8px 10px;
                    border-radius: 5px;
                    font-size: 14px;
                    color: #fff;
                    z-index: 9999;
                    // user-select:none;
                    opacity: 0;
                    visibility: hidden;
                    transition: all 0.2s ease-in;
                    cursor: text;

                    &:after {
                        content: "";
                        border: 8px solid transparent;
                        border-top-color: rgba(115, 103, 240, 0.9);
                        position: absolute;
                        bottom: -15px;
                        left: 50%;
                        transform: translate(-50%, 0);
                    }
                }

                &:hover .pop-up {
                    opacity: 1;
                    visibility: visible;
                }
            }

            .hon {
                color: #F84242;
            }

            .lixian {
                color: #90A4AE;
            }
        }
    }
}
</style>
